<template>
	<view class="login">
		<!--logo-->
		<view class="login-top">
			<view class="logo iconfont icon-fen"></view>
			<view class="title">考试系统</view>
		</view>
		<!--表单-->
		<view class="login-bottom">
			<uni-forms label-position="top" ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="用户名" name="userName">
					<uni-easyinput  class="login-box-input" placeholder="用户名" v-model.trim="formData.userName"/>
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<uni-easyinput  type="password" class="login-box-input" placeholder="密码" v-model.trim="formData.password"/>
				</uni-forms-item>
			</uni-forms>
			<button @click="submit">登录</button>
		</view>
		<view class="register">
			<view class="content1">还没有账号？</view>
			<view class="content2" @click="navigatotToRegister">注册</view>
		</view>
		<!-- <view class="version">{{ version }}</view> -->
	</view>
</template>

<script>
	
	export default {
		data(){
			return {
				//版本号
				version: this.$constant.version,
				//表单数据
				formData:{
					userName: "", //用户名
					password:"" //密码
				},
				//校验规则
				rules: {
					//对username字段进行必填校验
					userName : {
						rules: [{
							required: true,
							errorMessage: "请填写用户名！"
						}]
						
					},
					password: {
						rules: [{
							required: true,
							errorMessage: "请填写密码！"
						}]
					}
				},
				userinfo: {}
			}
		},
		methods: {
			//触发提交表单
			 submit(){
				console.log(1);
				this.$refs.form.validate().then(async res => {
					if( this.formData.userName == ""){
						uni.showToast({
						  title: "请填写用户名！",
						  icon: "none",
						  duration: 2000,
						});
						return;
					}
					if( this.formData.password == ""){
						uni.showToast({
						  title: "请填写密码！",
						  icon: "none",
						  duration: 2000,
						});
						return;
					}
					//进行登录
					const resp = await this.$myRequest({
						url: "/login",
						method: "POST",
						data: this.formData
					});
					//登录成功
					if( resp.data.code == 200){
						console.log(resp.data.obj.tokenHead + resp.data.obj.token);
						//将token存入到缓存中
						uni.setStorageSync("token",resp.data.obj.tokenHead + resp.data.obj.token);
						uni.setStorageSync("userinfo",this.userinfo);// 保存登录用户信息
						//跳转首页
						uni.switchTab({
						  url: "/pages/home/home"
						});
					}else{
						uni.showToast({
						  title: resp.data.message
						});
						return;
					}
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
				
			},
			//跳转注册页面
			navigatotToRegister(){
				uni.navigateTo({
				    url: '/pages/register/register'
				});
			},
			
			//获取用户信息
			async getUserInfo(){
				const resp = await this.$myRequest({
					url: "/login/info"
				});
				if(resp){
					this.userinfo = resp.data;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
page{
	height: 100%;
}
.login{
	width:100%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(#66BB6A,#ffffff 28%);
	padding-top: 20%;
	padding-bottom: 40rpx;
	box-sizing: border-box;
	.login-top{
		display: flex;
		flex-direction: column;
		// margin-top:0%;
		.logo{
			font-size: 230rpx;
			color:#66BB6A;
		}
		.title{
			font-size: 56rpx;
			font-weight: 300;
		}
	}
	.login-bottom{
		width:94%;
		
		margin-top: 50rpx;
		.login-box-input{
			background-color:#F8F8F8 ;
		}
		button{
			margin-top: 80rpx;
			background: #66BB6A;
		}
	}
	.register{
		display: flex;
		font-size: 28rpx;
		margin: 20rpx 0 0 0;
		.content1{
			color:#C0C4CC;
		}
		.content2{
			margin: 0 0 0 10rpx;
			color:#66BB6A;
		}
	}
	.version{
		position: fixed;
		bottom: 12rpx;
		width: 100%;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
}
</style>